<template>
  <div class="search">
    <span>姓名:</span>
    <el-input
      v-model="name"
      style="width: 120px; margin-right: 70px"
      placeholder="输入姓名"
    ></el-input>
    <span>职位:</span>

    <el-select
      v-model="value"
      style="width: 160px; margin-right: 70px"
      clearable
      placeholder="请选择职位"
    >
      <el-option
        v-for="item in gridData"
        :key="item.roleId"
        :label="item.role"
        :value="item.roleId"
      />
    </el-select>
    <span>电话:</span>
    <el-input
      v-model="phone"
      style="width: 200px; margin-right: 10px"
      placeholder="输入电话"
    ></el-input>
    <el-button type="primary" class="button" icon="Search" @click="getAdmin"
      >查询</el-button
    >
    <el-button @click="drawer = true" class="button" type="primary"
      >添加管理员</el-button
    >

    <!-- <el-button class="button" type="success" @click="dialogFormVisible = true">新增</el-button> -->
  </div>
  <div v-loading="loading" style="margin-top: 0px">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="userName" label="姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="email" label="邮箱" />

      <el-table-column prop="role" label="职位">
        <template #default="scope">
          <el-popover placement="right" :width="200" trigger="click">
            <template #reference>
              <el-button
                style="margin-right: 16px; width: 104px"
                @click="getGridData"
                >{{ scope.row.role }}</el-button
              >
            </template>

            <el-table :data="gridData">
              <el-table-column width="150" property="role" label="选择职位">
                <template #default="scope1">
                  <el-button
                    style="width: 100%"
                    @click="changeRoleByAmdin(scope.row.userId, scope1.row)"
                    round
                  >
                    {{ scope1.row.role }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="isDel" label="操作">
        <template #default="scope">
          <el-button
            style="width: 74px"
            :type="scope.row.isDel == 1?'primary':'info'"
            @click="handleEdit(scope.$id, scope.row)"
            >{{ scope.row.isDel == 1 ? "可用" : "已停用" }}</el-button
          >
          <el-button type="success" @click="changeMessage = true;userData = scope.row"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="example-pagination-block">
      <el-pagination
        layout="prev, pager, next"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        @current-change="changePage"
        background
        :total="pageTotal"
        class="mt-4"
        style="margin-top: 30px"
      />
    </div>

    <div>
      <el-dialog v-model="drawer" title="添加管理员" width="400px">
        <register-admin-vue :gridData="gridData"></register-admin-vue>
      </el-dialog>
    </div>
    <div>
      <el-dialog v-model="changeMessage" title="修改信息" width="400px">
        <register-admin-vue :gridData="gridData" :userData="userData"></register-admin-vue>
      </el-dialog>
    </div>
  </div>
</template>


<script>
import RegisterAdminVue from "./statements/components/RegisterAdmin.vue";
import { ref } from "vue";
export default {
  data() {
    return {
      tableData: [],
      gridData: [],
      pageNum: 1,
      pageSize: 10,
      pageTotal: 2,
      pageSizes: [1, 2, 3],
      method: "post",
      flag: true,
      loading: false,
      drawer: ref(false),
      changeMessage: ref(false),
      value: "",
      name: "",
      phone: "",
      userData:""
    };
  },
  methods: {
    getAdmin() {
      this.loading = true;
      this.axios({
        method: this.method,
        url: "/api/admin/getAllAdmin",
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
          phone: this.phone,
          roleId: this.value,
        },
      }).then((pramer) => {
        if (pramer.data.code == 200) {
          this.tableData = pramer.data.data.list;
          this.pageTotal = pramer.data.data.total;
          this.loading = false;
        }
        if (pramer.data.code == 400) {
          ElMessage({
            showClose: true,
            message: "查询失败",
            type: "error",
          });
        }
        this.loading = false;
      }).catch((res)=>{
        if(res.response.data.msg == "不允许访问"){
          this.$router.replace({ path: "/403" });
        }
      })
    },
    changePage(p) {
      this.pageNum = p;
      this.getAdmin();
    },
    handleEdit(index, row) {
      this.loading = true;

      this.axios({
        method: "delete",
        url: "/api/admin/" + row.userId + "/" + row.isDel,
      }).then((pramer) => {
        if (pramer.data.code == 200) {
          ElMessage({
            showClose: true,
            message: "修改成功",
            type: "success",
          });
        }
        if (pramer.data.code == 400) {
          ElMessage({
            showClose: true,
            message: "修改失败",
            type: "error",
          });
        }
        this.getAdmin();
        this.loading = false;
      });
    },
    getGridData() {
      this.axios
        .get("/api/admin/getAllAdminRole")
        .then((res) => {
          if (res.data.code == 200) {
            this.gridData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err.response.data.code);
        });
    },
    changeRoleByAmdin(index, row) {
      this.loading = true;
      this.axios
        .post("/api/admin/changeRole/" + index + "/" + row.roleId)
        .then((res) => {
          if (res.data.code == 200) {
            ElMessage({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          }
          if (res.data.code == 400) {
            ElMessage({
              showClose: true,
              message: "修改失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          ElMessage({
            showClose: true,
            message: "系统异常",
            type: "success",
          });
        });

      this.getAdmin();
      // this.loading = false;

    },
    changeUser() {},
  },
  created() {
    this.getAdmin();
    this.getGridData();
  },
  components: {
    RegisterAdminVue,
  },
};
</script>

<style>
.mt-4 {
  margin-left: 35%;
}
.search .el-input,
.el-select {
  margin-right: 70px;
  height: 30px;
}
.button {
  margin-left: 20px;
}
</style>